<template>
  <div class="container">
    <div class="userinfo">
      <!-- <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" /> -->
      <!-- <div class="userinfo-nickname">
        <card :text="userInfo.nickName"></card>
      </div> -->
      <img class="userinfo-avatar" src="/static/images/company_logo.png" background-size="cover" />
      <div class="userinfo-nickname">
        <card text="赛"></card>
      </div>
    </div>

    <!-- <div class="usermotto">
      <div class="user-motto">
        <card :text="motto"></card>
      </div>
    </div> -->

    <form @submit="login" @reset="formReset" name="workerForm">
      <!-- 使用 Field 圆角样式 -->
      <div class="zan-panel" style="margin-top:0px;">
        <div class="zan-row">
          <div class="zan-cell">
            <div class="zan-cell__icon zan-icon zan-icon-contact" style="color:#f5532d;"></div>
            <div class="zan-cell__bd">
              <input type="text" class="zan-filed" placeholder="请输入账号" name="username" value="admin">
            </div>
            <div class="zan-cell__ft"></div>
          </div>
        </div>
        <div class="line"></div>
        <input type="hidden" name="loginType" value="worker" style="display:none;">
        <div class="zan-row">
          <div class="zan-cell">
            <div class="zan-cell__icon zan-icon zan-icon-password-view" style="color:#f5532d;"></div>
            <div class="zan-cell__bd">
              <input type="password" class="zan-filed" placeholder="请输入密码" name="password" value="111111">
            </div>
            <div class="zan-cell__ft"></div>
          </div>
        </div>
        <div class="line"></div>
        <div class="zan-row">
          <div class="zan-btns">
            <button class="zan-btn zan-btn--warn" formType="submit">登录</button>
            <button class="zan-btn zan-btn--warn" @click="fnChoseWxLogin">微信登陆</button>
          </div>
        </div>
        <div class="zan-row">
          <div class="zan-col zan-col-6 zan-col-offset-1">立即注册</div>
          <div class="zan-col zan-col-6 zan-col-offset-11">
            <a href="../me/sendVerifyCode">忘记密码</a>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import ZanField from '../../components/zan/field'
import card from '@/components/card'
import { wxlogin } from '@/auth/wxLogin'
import { api } from '@/api/login'
import store from '@/store'
import App from './index'
export default {
  components: {
    card,
    ZanField
  },
  data() {
    return {
      userInfo: {}
    }
  },
  created() {},
  methods: {
    /**
     * 使用账号密码登录
     */
    login(event) {
      console.log(event.target.value)
      store
        .dispatch('Login', event.target.value)
        .then(() => {
          store.dispatch('GetWorkerInfo').then(res => {
            store.commit('SET_USER_INFO', res.data)
          })
          wx.switchTab({
            url: '../me/index'
          })
        })
        .catch(() => {})
    },
    /**
     * 使用微信登录
     */
    fnChoseWxLogin() {
      wxlogin(function() {
        
      })
      
    },
    formReset(event) {
      console.log('[zan:field:reset]', event)
    }
  }
}
</script>
<style  scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 280rpx;
  height: 280rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 130px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.zan-panel {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.zan-cell {
  position: relative;
  padding: 24rpx 30rpx;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  line-height: 2.8;
  font-size: 28rpx;
}
.line {
  width: 100%;
  height: 1px;
  background-color: #f4f4f4;
  margin-top: 1px;
}
.field__title--radius {
  padding-bottom: 10px;
}

.popup-field-example--bottom {
  width: 100%;
  height: 150px;
}

.picker-view-example {
  height: 120px;
}

.picker-view-column-example {
  line-height: 50px;
  text-align: center;
}
</style>
